import { BasicColumn, FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';

export const columns: BasicColumn[] = [
	{
		title: '菜单列表',
		dataIndex: 'name',
		width: 200,
		align: 'left'
	},
	{
		title: '图标',
		dataIndex: 'icon',
		width: 50,
		customRender: ({ record }) => {
			return h(Icon, { icon: record.icon });
		}
	},
	{
		title: '权限标识',
		dataIndex: 'permission',
		width: 180
	},
	{
		title: '组件',
		dataIndex: 'component'
	},
	{
		title: '排序',
		dataIndex: 'seqNo',
		width: 80
	},
	{
		title: '状态',
		dataIndex: 'enabled',
		width: 100,
		customRender: ({ record }) => {
			const enabled = record.enabled;
			const enable = enabled == '0';
			const color = enable ? 'green' : 'red';
			const text = enable ? '正常' : '停用';
			return h(Tag, { color: color }, () => text);
		}
	},
	{
		title: '创建时间',
		dataIndex: 'createTime',
		width: 180
	}
];

// const isDir = (type: string) => type === '0';
const isMenu = (type: string) => type === '1';
const isButton = (type: string) => type === '2';

export const searchFormSchema: FormSchema[] = [
	{
		field: 'F_name_like',
		label: '菜单列表',
		component: 'Input',
		componentProps: {
			placeholder: '请输入菜单列表'
		},
		colProps: { span: 6 }
	},
	{
		field: 'ORDER_seqNo_asc',
		label: '排序',
		component: 'Input',
		defaultValue: '1',
		show: false
	}
];

export const formSchema: FormSchema[] = [
	{
		field: 'id',
		label: 'ID',
		component: 'Input',
		show: false
	},
	{
		field: 'type',
		label: '菜单类型',
		component: 'RadioButtonGroup',
		defaultValue: '0',
		componentProps: {
			options: [{ label: '目录', value: '0' }, { label: '菜单', value: '1' }, { label: '按钮', value: '2' }]
		},
		colProps: { lg: 24, md: 24 }
	},
	{
		field: 'name',
		label: '菜单列表',
		component: 'Input',
		required: true
	},
	{
		field: 'parentId',
		label: '上级菜单',
		component: 'TreeSelect',
		componentProps: {
			fieldNames: {
				label: 'name',
				key: 'id',
				value: 'id'
			},
			getPopupContainer: () => document.body
		}
	},
	{
		field: 'seqNo',
		label: '排序',
		component: 'InputNumber',
		required: true
	},
	{
		field: 'icon',
		label: '图标',
		component: 'IconPicker',
		required: true,
		ifShow: ({ values }) => !isButton(values.type)
	},
	{
		field: 'path',
		label: '路由地址',
		component: 'Input',
		required: true,
		ifShow: ({ values }) => !isButton(values.type)
	},
	{
		field: 'component',
		label: '组件路径',
		component: 'Input',
		ifShow: ({ values }) => !isButton(values.type)
	},
	{
		field: 'permission',
		label: '权限标识',
		component: 'Input',
		ifShow: ({ values }) => isButton(values.type)
	},
	{
		field: 'enabled',
		label: '状态',
		component: 'RadioButtonGroup',
		defaultValue: 0,
		componentProps: {
			options: [{ label: '启用', value: 0 }, { label: '禁用', value: 1 }]
		}
	},
	{
		field: 'isExt',
		label: '是否外链',
		component: 'RadioButtonGroup',
		defaultValue: 0,
		componentProps: {
			options: [{ label: '否', value: 0 }, { label: '是', value: 1 }]
		},
		ifShow: ({ values }) => !isButton(values.type)
	},
	{
		field: 'keepAlive',
		label: '是否缓存',
		component: 'RadioButtonGroup',
		defaultValue: '0',
		componentProps: {
			options: [{ label: '否', value: '0' }, { label: '是', value: '1' }]
		},
		ifShow: ({ values }) => isMenu(values.type)
	},

	{
		field: 'hidden',
		label: '是否隐藏',
		component: 'RadioButtonGroup',
		defaultValue: '0',
		componentProps: {
			options: [{ label: '是', value: '1' }, { label: '否', value: '0' }]
		},
		ifShow: ({ values }) => !isButton(values.type)
	}
];
